<template>
  <div class="cardDetail">
    <div class="topBt">
      <p class="revoke">联系墙主删除</p>
      <p class="report">举报</p>
    </div>

    <!-- 留言板 -->
    <div class="note">
      <NodeCard :ip="ipInfo.ip" :note="note"></NodeCard>
    </div>

    <!-- 评论 -->
    <div class="comment">
      <textarea name="" id="" v-model="mes" placeholder="请输入..."></textarea>
      <div class="input">
        <input type="text" v-model="author" placeholder="匿名...">
        <YkButton @click="submitMessage">提交</YkButton>
      </div>
    </div>

    <!-- 评论列表 -->
    <div class="commentList">
      <div class="title">评论 {{ comments.length }}</div>

      <div class="commentItem" v-for="item in comments" :key="item">
        <div class="left" :style="{'background': portrait[item.imgurL]}">
          <img v-if="item.imgurL && isImgUrl(item.imgurL)" :src="item.imgurL" alt="">
        </div>
        <div class="right">
          <div class="top">
            <div class="name">{{ item.name }}</div>
            <div class="date">{{ dayjs(item.moment).format('YYYY-MM-DD hh:mm') }}</div>
          </div>
          <div class="content">
            {{ item.comment }}
          </div>
        </div>
      </div>

      <div class="more" v-show="isMore" @click="moreMes">加载更多</div>

    </div>
    
  </div>
</template>

<script setup>
import { defineProps, onMounted, reactive, ref, watch,inject} from "vue";
import dayjs from "dayjs";
import { getComment,addComment } from "@/api/comments"
import { getIpInfo } from "@/api/walls"
import { portrait } from "@/utils/data"
import NodeCard from "@/components/NodeCard.vue"
import YkButton from "@/components/YkButton.vue"

const props = defineProps({
  note: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

// 获取弹窗插件
const $message = inject('$message');

// 评论数据
const comments = ref([])

const mes = ref('')
const author = ref('匿名...')

// 评论表单
const commentForm = reactive({
  "WaLLId": "",
  "userId": "",
  "imgurL": "",
  "comment": "",
  "name": "",
  "moment": new Date()
})

// 是否加载更多
const isMore = ref(true)

// 获取ip信息
let ipInfo = ref('');

// 判断是图片路径 
const isImgUrl = (url) => {
  // 判断url是否是字符串
  if(typeof url !== 'string') {
    return false
  }
  // 通过图片路径的格式判断
  const imgUrl = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
  const urlArr = url.split('.')
  const imgType = urlArr[urlArr.length - 1]
  return imgUrl.includes(imgType)
}

// 留言数据查询条件
const mesQuery = reactive({
  page: 1,
  pageSize: 10,
  
})

// 获取留言
const getMessage = async () => {
  const res = await getComment(Object.assign({WaLLId: props.note._id}, mesQuery))
  if (res.code == 200) {
    if(comments.value.length == res.total) {
      isMore.value = false
    }
    // 反转数据
    comments.value = res.data.reverse()
  }
}

// 提交留言
const submitMessage = async () => {
  if (!mes.value) {
    $message({type: 'error', message: '请输入留言'})
    return
  }
  commentForm.WaLLId = props.note._id
  commentForm.comment = mes.value
  commentForm.name = author.value
  commentForm.userId = ipInfo.value.ip

  if(commentForm.imgurL.trim() == '') {
    // 随机生成数据0到5
    commentForm.imgurL = Math.floor(Math.random() * 5)
  }

  // 刷新评论数据
  const res = await addComment(commentForm)
  if (res.code == 200) {
    $message({type: 'success', message: '留言成功'})
    getMessage()
    // 清空留言
    mes.value = ''
    author.value = '匿名...'
  }
}

// 加载更多留言
function moreMes() {
  mesQuery.pageSize += 10
  getMessage()
}


// 监听留言
watch(() => props.note._id, () => {
  getMessage()
})

// 获取留言
onMounted(async () => {
  getMessage()
  ipInfo.value = await getIpInfo()
})


</script>

<style lang="less" scoped>
.cardDetail {
  position: relative;
  .topBt {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    display: flex;
    p {
      margin:@padding-20;
      cursor: pointer;
    }

    .revoke {
      color: @primary-color;
      font-size: @font-size-16;
    }
    .report {
      font-size: @font-size-16;
      color: @warning-color;
    }

  }

  .note {
    padding: @padding-20;
  }

  .comment {
    padding: 0 @padding-20;
    textarea {
      width: 100%;
      height: 57px;
      background: none;
      border: none;
      resize: none;
      font-family: '宋体';
      border: 1px solid @gray-2;
      box-sizing: border-box;
      padding: @padding-8;
      color: @gray-2;
    }
    .input {
      display: flex;
      justify-content: space-between;
      input {
        padding-left: @padding-8;
      }
    }
  }

  // 评论列表
  .commentList {
    padding: @padding-20;
    .title {
      font-weight: 600;
      padding-bottom: @padding-20;
    }

    .commentItem {
      display: flex;
      margin-bottom: @padding-20;
      .left {
        width: 28px;
        height: 28px;
        background: bisque;
        border-radius: 50%;
        margin-right: 10px;
      }
      .right {
        width: 88%;
        .top {
          display: flex;
          align-items: end;
          margin-bottom: @padding-4;
          .name {
            margin-right: @padding-8;
            font-weight: 600;
          }
          .date {
            color: @gray-3;
          }
        }
      }
    }

    .more {
      color: @gray-2;
      text-align: center;
      padding: @padding-20;
      cursor: pointer;
    }

  }

}
</style>